<template>
  <el-card class="content">
    <el-form :model="query" ref="eddFormRef" :inline="true">
      <el-form-item label="尾矿库类型:">
        <el-col :span="22">
          <el-select v-model="query.tailingTypeId" size="mini" clearable>
            <el-option
              v-for="item in isTailingList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getSearch" size="small"
          >查询</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="small"
          @click="dialogVisible = true"
          >新增</el-button
        >
      </el-form-item>
    </el-form>
    <p class="bg-purple">尾矿库信息列表</p>
    <el-table :data="tailingList" stripe size="small">
      <el-table-column
        prop="tailingName"
        label="尾矿库名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="tailingNumber"
        label="尾矿库编号"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="tailingTypeName"
        label="尾矿库类型"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="industryTypeName"
        label="行业"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="mineralsSpeciesName"
        label="矿种"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="onlineMonitoringSys"
        label="是否安装在线监测系统"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.onlineMonitoringSys == 0">是</span>
          <span v-if="scope.row.onlineMonitoringSys == 1">否</span>
        </template>
      </el-table-column>
      <el-table-column prop="top" label="是否头顶库" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.top == 0">是</span>
          <span v-else-if="scope.row.top == 1">否</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="securityOfficer"
        label="分管安全负责人"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="securityOfficerTel"
        label="分管安全负责人电话"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="ondutyTel"
        label="值班电话"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="latitude"
        label="纬度"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="longitude"
        label="经度"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="useDate"
        label="投入使用日期"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="useYear"
        label="设计服务年限"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" align="center" prop="id">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="riskGrade(scope.row)"
            >四色图管理</el-button
          >
          <el-button type="text" size="small" @click="editTailing(scope.row)"
            >修改</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="delTailingList(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="end">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[10, 15]"
        :page-size="query.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-row>
    <!-- 四色图 -->
    <el-dialog
      title="风险等级示意图"
      :visible.sync="riskDialogVisible"
      width="30%"
    >
      <el-form ref="riskRefs" :model="riskForm" inline>
        <el-row>
          <el-col :span="12">
            <el-form-item label="较低风险">
              <el-upload
                :action="
                  uploadUrl +
                  '/group/tailingPondRiskLevelImageHandle/imageUpload'
                "
                :on-success="handleLowRiskEditSuccess"
                :before-upload="beforeAvatarUpload"
                list-type="picture-card"
                :show-file-list="false"
                class="avatar-uploader"
              >
                <i
                  v-if="riskForm.lowRisk == null"
                  slot="default"
                  class="el-icon-plus"
                ></i>
                <img
                  v-if="riskForm.lowRisk != null"
                  class="avatar"
                  :src="imgRiskUrl + riskForm.lowRisk"
                />
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="一般风险">
              <el-upload
                :action="
                  uploadUrl +
                  '/group/tailingPondRiskLevelImageHandle/imageUpload'
                "
                :on-success="handleGeneralRiskEditSuccess"
                :before-upload="beforeAvatarUpload"
                list-type="picture-card"
                :show-file-list="false"
                class="avatar-uploader"
              >
                <i
                  v-if="riskForm.generalRisk == null"
                  slot="default"
                  class="el-icon-plus"
                ></i>
                <img
                  v-if="riskForm.generalRisk != null"
                  class="avatar"
                  :src="imgRiskUrl + riskForm.generalRisk"
                />
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="较大风险">
              <el-upload
                :action="
                  uploadUrl +
                  '/group/tailingPondRiskLevelImageHandle/imageUpload'
                "
                :on-success="handleHigherRiskEditSuccess"
                :before-upload="beforeAvatarUpload"
                list-type="picture-card"
                :show-file-list="false"
                class="avatar-uploader"
              >
                <i
                  v-if="riskForm.higherRisk == null"
                  slot="default"
                  class="el-icon-plus"
                ></i>
                <img
                  v-if="riskForm.higherRisk != null"
                  class="avatar"
                  :src="imgRiskUrl + riskForm.higherRisk"
                />
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="重大风险">
              <el-upload
                :action="
                  uploadUrl +
                  '/group/tailingPondRiskLevelImageHandle/imageUpload'
                "
                :on-success="handleMajorRiskEditSuccess"
                :before-upload="beforeAvatarUpload"
                list-type="picture-card"
                :show-file-list="false"
                class="avatar-uploader"
              >
                <i
                  v-if="riskForm.majorRisk == null"
                  slot="default"
                  class="el-icon-plus"
                ></i>
                <img
                  v-if="riskForm.majorRisk != null"
                  class="avatar"
                  :src="imgRiskUrl + riskForm.majorRisk"
                />
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item class="buttonfrom">
          <el-button type="primary" @click="isEditRiskImage">确定</el-button>
          <el-button @click="riskDialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 新增弹窗 -->
    <el-dialog
      title="添加尾矿库信息"
      :visible.sync="dialogVisible"
      :width="dialogWidth"
    >
      <el-form
        :model="addListForm"
        ref="addListForm"
        label-width=".6rem"
        size="mini"
        :rules="rules"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="企业" label-width="1.3rem" prop="unitId">
              <el-select
                style="width: 1.3rem"
                v-model="addListForm.unitId"
                placeholder="请选择企业"
                clearable
              >
                <el-option
                  v-for="item in unitInfoList"
                  :key="item.unitId"
                  :value="item.unitId"
                  :label="item.unitName"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="尾矿库名称"
              label-width="1.3rem"
              prop="tailingName"
            >
              <el-input
                style="width: 1.3rem"
                v-model="addListForm.tailingName"
                placeholder="请填写尾矿库名称"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="所属省市"
              label-width="1.3rem"
              prop="tailingAreaName"
            >
              <el-select
                style="width: 0.65rem"
                v-model="addListForm.provinceName"
                placeholder="请选择省份（直辖市）"
                @change="renderCity($event)"
                clearable
              >
                <el-option
                  v-for="item in provinceListAll"
                  :key="item.id"
                  :value="item.provinceName"
                  :label="item.provinceName"
                >
                </el-option>
              </el-select>
              <el-select
                style="width: 0.65rem"
                v-model="addListForm.tailingAreaName"
                placeholder="请选择城市"
                clearable
              >
                <el-option
                  v-for="item in cityListAll"
                  :key="item.areaId"
                  :value="item.cityName"
                  :label="item.cityName"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="尾矿库等级"
              label-width="1.3rem"
              prop="tailingLevelId"
            >
              <el-select
                style="width: 1.3rem"
                v-model="addListForm.tailingLevelId"
                placeholder="请选择尾矿库等级"
                clearable
              >
                <el-option
                  v-for="item in tailingPondLevelList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="尾矿库编号"
              label-width="1.3rem"
              size="mini"
              prop="tailingNumber"
            >
              <el-input
                v-model="addListForm.tailingNumber"
                style="width: 1.3rem"
                placeholder="请填写尾矿库编号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="尾矿库类型"
              label-width="1.3rem"
              prop="tailingTypeId"
            >
              <el-select
                v-model="addListForm.tailingTypeId"
                style="width: 1.3rem"
                size="mini"
              >
                <el-option
                  v-for="item in isTailingList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="矿种"
              size="mini"
              label-width="1.3rem"
              prop="mineralsSpeciesId"
            >
              <el-select
                v-model="addListForm.mineralsSpeciesId"
                style="width: 1.3rem"
              >
                <el-option
                  v-for="item in isMinerals"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="行业"
              size="mini"
              label-width="1.3rem"
              prop="industryTypeId"
            >
              <el-select
                v-model="addListForm.industryTypeId"
                style="width: 1.3rem"
              >
                <el-option
                  v-for="item in isIndustryList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"
            ><el-form-item
              label="运行状况"
              label-width="1.3rem"
              prop="operatingStatusId"
            >
              <el-select
                style="width: 1.3rem"
                v-model="addListForm.operatingStatusId"
                size="mini"
              >
                <el-option
                  v-for="item in isRunningState"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="值班电话"
              size="mini"
              label-width="1.3rem"
              prop="ondutyTel"
            >
              <el-input
                v-model="addListForm.ondutyTel"
                style="width: 1.3rem"
                placeholder="请填写值班电话"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12"
            ><el-form-item
              label="经度"
              size="mini"
              label-width="1.3rem"
              prop="longitude"
            >
              <el-input
                v-model="addListForm.longitude"
                style="width: 1.3rem"
                placeholder="请填写经度"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item
              label="纬度"
              size="mini"
              label-width="1.3rem"
              prop="latitude"
            >
              <el-input
                v-model="addListForm.latitude"
                style="width: 1.3rem"
                placeholder="请填写纬度"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="分管安全负责人"
              size="mini"
              prop="securityOfficer"
              label-width="1.3rem"
            >
              <el-input
                v-model="addListForm.securityOfficer"
                style="width: 1.3rem"
                placeholder="请填写分管安全负责人"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item
              label="分管安全负责人电话"
              label-width="1.3rem"
              size="mini"
              prop="securityOfficerTel"
            >
              <el-input
                v-model="addListForm.securityOfficerTel"
                style="width: 1.3rem"
                placeholder="请填写分管安全负责人电话"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否头顶库" label-width="1.3rem" prop="top">
              <el-radio-group v-model="addListForm.top">
                <el-radio
                  v-for="item in topList"
                  :key="item.id"
                  :label="item.id"
                  >{{ item.name }}</el-radio
                >
              </el-radio-group>
            </el-form-item></el-col
          >
          <el-col :span="12">
            <el-form-item
              label="是否安装在线监测系统"
              label-width="1.3rem"
              prop="onlineMonitoringSys"
            >
              <el-radio-group v-model="addListForm.onlineMonitoringSys">
                <el-radio
                  v-for="item in onlineMonitoringSysList"
                  :key="item.id"
                  :label="item.id"
                  >{{ item.name }}</el-radio
                >
              </el-radio-group>
            </el-form-item></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="投入使用日期"
              size="mini"
              label-width="1.3rem"
              prop="useDate"
            >
              <el-date-picker
                v-model="addListForm.useDate"
                placeholder="选择日期时间"
                style="width: 1.3rem"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker> </el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item
              label="设计服务年限"
              size="mini"
              label-width="1.3rem"
              prop="useYear"
            >
              <el-input
                style="width: 1.3rem"
                v-model="addListForm.useYear"
                type="number"
                placeholder="选择服务年限"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="正射影像地址"
              size="mini"
              prop="mapUrl"
              label-width="1.3rem"
            >
              <el-input
                v-model="addListForm.mapUrl"
                style="width: 1.3rem"
                placeholder="请填写正射影像地址"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="三维影像地址"
              size="mini"
              prop="tileUrl"
              label-width="1.3rem"
            >
              <el-input
                v-model="addListForm.tileUrl"
                style="width: 1.3rem"
                placeholder="请填写三维影像地址"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item class="buttonfrom">
          <el-button type="primary" @click="isdialogVisible">确 定</el-button>
          <el-button @click="closeDialogVisible">取 消</el-button>
          <!-- </span> -->
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 修改弹窗 -->
    <el-dialog
      title="修改尾矿库信息"
      :visible.sync="editDialogVisible"
      :width="dialogWidth"
    >
      <el-form
        :model="editListForm"
        ref="editListForm"
        label-width=".6rem"
        size="mini"
        :rules="ruless"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="企业" label-width="1.3rem" prop="unitId">
              <el-select
                style="width: 1.3rem"
                v-model="editListForm.unitId"
                placeholder="请选择企业"
                clearable
              >
                <el-option
                  v-for="item in unitInfoList"
                  :key="item.unitId"
                  :value="item.unitId"
                  :label="item.unitName"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="尾矿库名称"
              label-width="1.3rem"
              prop="tailingName"
            >
              <el-input
                style="width: 1.3rem"
                v-model="editListForm.tailingName"
                placeholder="请填写尾矿库名称"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="尾矿库地址" label-width="1.3rem">
              <el-select
                style="width: 0.65rem"
                v-model="editListForm.provinceName"
                placeholder="请选择省份（直辖市）"
                @change="renderCity($event)"
                clearable
              >
                <el-option
                  v-for="item in provinceListAll"
                  :key="item.id"
                  :value="item.provinceName"
                  :label="item.provinceName"
                >
                </el-option>
              </el-select>
              <el-select
                style="width: 0.65rem"
                v-model="editListForm.tailingAreaName"
                placeholder="请选择城市"
                clearable
              >
                <el-option
                  v-for="item in cityListAll"
                  :key="item.areaId"
                  :value="item.cityName"
                  :label="item.cityName"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="尾矿库等级"
              label-width="1.3rem"
              prop="tailingLevelId"
            >
              <el-select
                style="width: 1.3rem"
                v-model="editListForm.tailingLevelId"
                placeholder="请选择尾矿库等级"
                clearable
              >
                <el-option
                  v-for="item in tailingPondLevelList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="尾矿库编号"
              label-width="1.3rem"
              size="mini"
              prop="tailingNumber"
            >
              <el-input
                v-model="editListForm.tailingNumber"
                style="width: 1.3rem"
                placeholder="请填写尾矿库编号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="尾矿库类型"
              label-width="1.3rem"
              prop="tailingTypeId"
            >
              <el-select
                v-model="editListForm.tailingTypeId"
                style="width: 1.3rem"
                size="mini"
              >
                <el-option
                  v-for="item in isTailingList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="矿种"
              size="mini"
              label-width="1.3rem"
              prop="mineralsSpeciesId"
            >
              <el-select
                v-model="editListForm.mineralsSpeciesId"
                style="width: 1.3rem"
              >
                <el-option
                  v-for="item in isMinerals"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="行业"
              size="mini"
              label-width="1.3rem"
              prop="industryTypeId"
            >
              <el-select
                v-model="editListForm.industryTypeId"
                style="width: 1.3rem"
              >
                <el-option
                  v-for="item in isIndustryList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"
            ><el-form-item
              label="运行状况"
              label-width="1.3rem"
              prop="operatingStatusId"
            >
              <el-select
                style="width: 1.3rem"
                v-model="editListForm.operatingStatusId"
                size="mini"
              >
                <el-option
                  v-for="item in isRunningState"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="值班电话"
              size="mini"
              label-width="1.3rem"
              prop="ondutyTel"
            >
              <el-input
                v-model="editListForm.ondutyTel"
                style="width: 1.3rem"
                placeholder="请填写值班电话"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12"
            ><el-form-item
              label="经度"
              size="mini"
              label-width="1.3rem"
              prop="longitude"
            >
              <el-input
                v-model="editListForm.longitude"
                style="width: 1.3rem"
                placeholder="请填写经度"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item
              label="纬度"
              size="mini"
              label-width="1.3rem"
              prop="latitude"
            >
              <el-input
                v-model="editListForm.latitude"
                style="width: 1.3rem"
                placeholder="请填写纬度"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="分管安全负责人"
              size="mini"
              prop="securityOfficer"
              label-width="1.3rem"
            >
              <el-input
                v-model="editListForm.securityOfficer"
                style="width: 1.3rem"
                placeholder="请填写分管安全负责人"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item
              label="分管安全负责人电话"
              label-width="1.3rem"
              size="mini"
              prop="securityOfficerTel"
            >
              <el-input
                v-model="editListForm.securityOfficerTel"
                style="width: 1.3rem"
                placeholder="请填写分管安全负责人电话"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否头顶库" label-width="1.3rem" prop="top">
              <el-radio-group v-model="editListForm.top">
                <el-radio
                  v-for="item in topList"
                  :key="item.id"
                  :label="item.id"
                  >{{ item.name }}</el-radio
                >
              </el-radio-group>
            </el-form-item></el-col
          >
          <el-col :span="12">
            <el-form-item
              label="是否安装在线监测系统"
              label-width="1.3rem"
              prop="onlineMonitoringSys"
            >
              <el-radio-group v-model="editListForm.onlineMonitoringSys">
                <el-radio
                  v-for="item in onlineMonitoringSysList"
                  :key="item.id"
                  :label="item.id"
                  >{{ item.name }}</el-radio
                >
              </el-radio-group>
            </el-form-item></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="投入使用日期"
              size="mini"
              label-width="1.3rem"
              prop="useDate"
            >
              <el-date-picker
                v-model="editListForm.useDate"
                placeholder="选择日期时间"
                style="width: 1.3rem"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker> </el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item
              label="设计服务年限"
              size="mini"
              label-width="1.3rem"
              prop="useYear"
            >
              <el-input
                style="width: 1.3rem"
                v-model="editListForm.useYear"
                type="number"
                placeholder="选择服务年限"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="正射影像地址"
              size="mini"
              prop="mapUrl"
              label-width="1.3rem"
            >
              <el-input
                v-model="editListForm.mapUrl"
                style="width: 1.3rem"
                placeholder="请填写正射影像地址"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="三维影像地址"
              size="mini"
              prop="tileUrl"
              label-width="1.3rem"
            >
              <el-input
                v-model="editListForm.tileUrl"
                style="width: 1.3rem"
                placeholder="请填写三维影像地址"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item class="buttonfrom">
          <!-- <span slot="footer" class="dialog-footer"> -->
          <el-button type="primary" @click="EditdialogVisible">确 定</el-button>
          <el-button @click="eidtCloseDialogVisible">取 消</el-button>
          <!-- </span> -->
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-card>
</template>

<script>
import {
  getTailingPondInforByPage,
  getTailingTypeList,
  getIndustryTypeList,
  getMineralsSpeciesList,
  getOperatingStatusList,
  getAreaTreeList,
  getTailingPondLevelList,
  getUnitInfoList,
  uploadUrl,
  getRiskLevelImage,
  imgRiskUrl,
} from "../../api/user";
import Axios from "axios";
export default {
  name: "TailingPondInfor",
  data() {
    return {
      value1: "",
      value2: "",
      total: 1,
      dialogWidth: "6rem",
      query: {
        page: 1,
        pagesize: 10,
        tailingPondId: "", // 尾矿库Id
        tailingTypeId: "", // 尾矿库类型
      },
      riskDialogVisible: false,
      uploadUrl,
      imgRiskUrl,
      riskForm: {
        lowRisk: "",
        generalRisk: "",
        higherRisk: "",
        majorRisk: "",
        tailingPondId: "",
      },
      dialogImageUrl: "",
      disabled: false,
      tailingList: [],
      dialogVisible: false,
      provinceListAll: [], // 全国34个省份（包括直辖市）列表
      cityListAll: [], // 全国各个城市列表
      citySelectAble: false, // 城市是否可选
      unitInfoList: [], // 企业列表
      addListForm: {
        unitId: null,
        tailingName: "",
        tailingLevelId: null,
        provinceName: "", // 所属省市
        tailingAreaName: "", // 所属城市
        tailingNumber: null,
        tailingTypeId: null,
        mineralsSpeciesId: null,
        industryTypeId: null,
        operatingStatusId: null,
        ondutyTel: null,
        longitude: null,
        latitude: null,
        securityOfficer: "",
        securityOfficerTel: "",
        onlineMonitoringSys: "",
        top: null,
        useDate: "",
        useYear: "",
        tailingPondId: sessionStorage.getItem("sensorId"),
        tileUrl: "",
        mapUrl: "",
      },
      //表单验证
      rules: {
        unitId: [{ required: true, message: "请选择企业", trigger: "change" }],
        tailingName: [
          { required: true, message: "请输入尾矿库名称", trigger: "blur" },
          { min: 0, max: 30, trigger: "blur" },
        ],
        tailingLevelId: [
          { required: true, message: "请选择尾矿库等级", trigger: "change" },
        ],

        provinceName: [
          { required: true, message: "请选择所属省市", trigger: "change" },
        ],
        tailingNumber: [
          { required: true, message: "请输入尾矿库编号", trigger: "blur" },
        ],
        minetailingNumberrals: [
          { required: true, message: "请输入尾矿库编号", trigger: "blur" },
        ],
        tailingTypeId: [
          { required: true, message: "请选择类型", trigger: "change" },
        ],
        mineralsSpeciesId: [
          { required: true, message: "请选择矿种", trigger: "change" },
        ],

        industryTypeId: [
          { required: true, message: "请选择行业", trigger: "change" },
        ],
        operatingStatusId: [
          { required: true, message: "请选择运行状况", trigger: "change" },
        ],
        ondutyTel: [
          { required: true, message: "请填写值班电话", trigger: "blur" },
        ],
        longitude: [{ required: true, message: "请填写经度", trigger: "blur" }],
        latitude: [{ required: true, message: "请填写纬度", trigger: "blur" }],
        securityOfficerTel: [
          { required: true, validator: this.checkPhone, trigger: "blur" },
        ],
        securityOfficer: [
          { required: true, message: "请填写分管安全负责人", trigger: "blur" },
        ],
        onlineMonitoringSys: [
          {
            required: true,
            message: "请选择是否安装在线监测系统",
            trigger: "change",
          },
        ],
        top: [
          {
            required: true,
            message: "请选择是否是否头顶库",
            trigger: "change",
          },
        ],
        useDate: [
          { required: true, message: "请选择投入使用日期", trigger: "change" },
        ],
        useYear: [
          { required: true, message: "请选择设计服务年限", trigger: "change" },
        ],
      },
      ruless: {
        unitId: [{ required: true, message: "请选择企业", trigger: "change" }],
        tailingName: [
          { required: true, message: "请输入尾矿库名称", trigger: "blur" },
          { min: 0, max: 30, trigger: "blur" },
        ],
        tailingLevelId: [
          { required: true, message: "请选择尾矿库等级", trigger: "change" },
        ],

        provinceName: [
          { required: true, message: "请选择所属省市", trigger: "change" },
        ],
        tailingNumber: [
          { required: true, message: "请输入尾矿库编号", trigger: "blur" },
        ],
        minetailingNumberrals: [
          { required: true, message: "请输入尾矿库编号", trigger: "change" },
        ],
        tailingTypeId: [
          { required: true, message: "请选择类型", trigger: "change" },
        ],
        mineralsSpeciesId: [
          { required: true, message: "请选择矿种", trigger: "change" },
        ],

        industryTypeId: [
          { required: true, message: "请选择行业", trigger: "change" },
        ],
        operatingStatusId: [
          { required: true, message: "请选择运行状况", trigger: "change" },
        ],
        ondutyTel: [
          { required: true, message: "请填写值班电话", trigger: "blur" },
        ],
        longitude: [{ required: true, message: "请填写经度", trigger: "blur" }],
        latitude: [{ required: true, message: "请填写纬度", trigger: "blur" }],
        securityOfficerTel: [
          { required: true, validator: this.checkPhone, trigger: "blur" },
        ],
        securityOfficer: [
          { required: true, message: "请填写分管安全负责人", trigger: "blur" },
        ],
        onlineMonitoringSys: [
          {
            required: true,
            message: "请选择是否安装在线监测系统",
            trigger: "change",
          },
        ],
        top: [
          {
            required: true,
            message: "请选择是否是否头顶库",
            trigger: "change",
          },
        ],
        useDate: [
          { required: true, message: "请选择投入使用日期", trigger: "change" },
        ],
        useYear: [
          { required: true, message: "请选择设计服务年限", trigger: "change" },
        ],
      },
      isIndustryList: [], //行业列表
      isMinerals: [], //矿种
      isRunningState: [], //运行状况
      isTailingList: [], //类型列表
      topList: [
        { id: 0, name: "是" },
        { id: 1, name: "否" },
      ],
      onlineMonitoringSysList: [
        { id: 0, name: "是" },
        { id: 1, name: "否" },
      ],
      //修改弹窗
      editListForm: {
        unitId: null,
        tailingName: "",
        tailingLevelId: null,
        provinceName: "", // 所属省市
        tailingAreaCode: "", // 所属城市
        tailingAreaName: "", // 所属城市
        tailingNumber: null,
        tailingTypeId: null,
        mineralsSpeciesId: null,
        industryTypeId: null,
        operatingStatusId: null,
        ondutyTel: null,
        longitude: 116.397128,
        latitude: 39.916527,
        securityOfficer: "",
        securityOfficerTel: "",
        onlineMonitoringSys: "",
        top: null,
        useDate: "",
        useYear: "",
        tailingPondId: "",
        id: null,
        tileUrl: "",
        mapUrl: "",
      },
      editDialogVisible: false,
      none: false,
      tailingPondLevelList: [],
      tailingPondId: null,
    };
  },
  created() {
    this.$common.treeVisible = false;
    this.getTailingPondInforByPage();
  },
  mounted() {
    this.getIndustryList();
    this.getMineralsSpecies();
    this.getOperatingStatusList();
    this.getTailingTypeList();
    this.getAreaTreeList();
    this.getUnitInfoList();
    this.getTailingPondLevelList();
    window.onresize = () => {
      return (() => {
        this.setDialogWidth();
      })();
    };
  },
  methods: {
    checkPhone(rule, value, callback) {
      if (!value) {
        return callback(new Error("不能为空"));
      } else {
        const reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/;
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的手机号"));
        }
      }
    },
    //分页修改
    async getTailingPondInforByPage() {
      const res = await getTailingPondInforByPage({
        pageCount: this.query.page,
        pageSize: this.query.pagesize,
        tailingPondId: this.query.tailingPondId,
      });
      this.total = res.parameter.total;
      this.tailingList = res.parameter.list;
    },
    async getSearch() {
      const res = await getTailingPondInforByPage({
        pageCount: this.query.page,
        pageSize: this.query.pagesize,
        tailingTypeId: this.query.tailingTypeId,
        tailingPondId: sessionStorage.getItem("sensorId"),
      });
      if (res.resultCode == "204") {
        this.$message({
          message: "暂无数据",
          offset: 400,
          duration: 1000,
        });
        this.tailingList = [];
        this.total = 0;
      }
      if (res.resultCode == "200") {
        this.$message({
          type: "success",
          message: "成功查询到数据",
          offset: 400,
          duration: 1000,
        });
        this.total = res.parameter.total;
        this.tailingList = res.parameter.list;
      }
      if (res.resultCode == "400") {
        this.$message({
          type: "error",
          message: "查询失败",
          offset: 400,
          duration: 1000,
        });
        this.tailingList = [];
        this.total = 0;
      }
    },
    handleSizeChange(val) {
      this.query.pagesize = val;
      this.getTailingPondInforByPage();
    },
    handleCurrentChange(val) {
      this.query.page = val;
      this.getTailingPondInforByPage();
    },
    // 上传图片前的验证
    beforeAvatarUpload(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/gif" ||
        file.type === "image/jpg";
      const isLt4M = file.size / 1024 / 1024 < 4;

      if (!isJPG) {
        this.$message.error("上传图片格式不对!");
      }
      if (!isLt4M) {
        this.$message.error("上传图片大小不能超过 4MB!");
      }
      return isJPG && isLt4M;
    },
    riskGrade(row) {
      this.riskDialogVisible = true;
      this.riskForm.tailingPondId = row.id;
      this.getRiskLevelImage(row.id);
    },
    async getRiskLevelImage(tainglingPondId) {
      const res = await getRiskLevelImage({ tainglingPondId: tainglingPondId });
      if (res.resultCode == "200") {
        this.riskForm.lowRisk = res.parameter.lowRisk;
        this.riskForm.generalRisk = res.parameter.generalRisk;
        this.riskForm.higherRisk = res.parameter.higherRisk;
        this.riskForm.majorRisk = res.parameter.majorRisk;
      } else {
        this.riskForm.lowRisk = null;
        this.riskForm.generalRisk = null;
        this.riskForm.higherRisk = null;
        this.riskForm.majorRisk = null;
      }
    },
    isEditRiskImage() {
      this.$refs.riskRefs.validate((valid) => {
        if (valid) {
          const formData = new FormData();
          for (const [key, value] of Object.entries(this.riskForm)) {
            formData.append(key, value);
          }
          Axios({
            method: "post",
            url: "/group/tailingPondRiskLevelImage/updateRiskLevelImage",
            data: formData,
          }).then((res) => {
            if (res.data.resultCode == 200) {
              this.$message({
                type: "success",
                message: "修改成功",
                offset: 400,
                duration: 1000,
              });
            } else if (res.data.resultCode == "400") {
              this.$message({
                type: "error",
                message: "修改失败",
                offset: 400,
                duration: 1000,
              });
            }
            this.riskDialogVisible = false;
          });
        } else {
          this.$message({
            type: "error",
            message: "请完成表单",
            offset: 400,
            duration: 1000,
          });
        }
      });
    },
    // 上传修改后的低风险
    handleLowRiskEditSuccess(res) {
      this.riskForm.lowRisk = res.data;
    },
    // 上传修改后的一般风险
    handleGeneralRiskEditSuccess(res) {
      this.riskForm.generalRisk = res.data;
    },
    // 上传修改后的较大风险
    handleHigherRiskEditSuccess(res) {
      this.riskForm.higherRisk = res.data;
    },
    // 上传修改后的重大风险
    handleMajorRiskEditSuccess(res) {
      this.riskForm.majorRisk = res.data;
    },
    //行业列表
    async getIndustryList() {
      const res = await getIndustryTypeList();
      if (res.resultCode == "400")
        return this.$message({
          type: "error",
          message: "查询行业列表失败",
          offset: 400,
          duration: 1000,
        });
      res.parameter.forEach((item) => {
        if (item !== undefined) {
          this.isIndustryList.push(item);
        }
      });
    },
    //矿种
    async getMineralsSpecies() {
      const res = await getMineralsSpeciesList();
      if (res.resultCode == "400")
        return this.$message({
          type: "error",
          message: "查询矿种列表失败",
          offset: 400,
          duration: 1000,
        });
      res.parameter.forEach((item) => {
        if (item !== undefined) {
          this.isMinerals.push(item);
        }
      });
    },
    // 运行
    async getOperatingStatusList() {
      const res = await getOperatingStatusList();
      if (res.resultCode == "400")
        return this.$message({
          type: "error",
          message: "查询运行状态失败",
          offset: 400,
          duration: 1000,
        });
      res.parameter.forEach((item) => {
        if (item !== undefined) {
          this.isRunningState.push(item);
        }
      });
    },
    //列表类型
    async getTailingTypeList() {
      const res = await getTailingTypeList();
      if (res.resultCode == "400")
        return this.$message({
          type: "error",
          message: "查询尾矿库列表失败",
          offset: 400,
          duration: 1000,
        });
      res.parameter.forEach((item) => {
        if (item !== undefined) {
          this.isTailingList.push(item);
        }
      });
    },
    // 企业列表
    async getUnitInfoList() {
      const res = await getUnitInfoList();
      if (res.resultCode == "200") {
        this.unitInfoList = res.parameter;
      }
    },
    // 尾矿库等级列表
    async getTailingPondLevelList() {
      const res = await getTailingPondLevelList();
      if (res.resultCode == "200") {
        this.tailingPondLevelList = res.parameter;
      }
    },
    // 城市列表
    async getAreaTreeList() {
      const res = await getAreaTreeList();
      if (res.resultCode == "200") {
        this.provinceListAll = res.parameter.provinceDtoList;
      }
    },
    renderCity(val) {
      this.cityListAll = [];
      // 根据选择的省份，展示该省份相对应的城市列表，未选择省份时，不能选择城市
      for (let i = 0; i < this.provinceListAll.length; i++) {
        if (
          val == this.provinceListAll[i].provinceName &&
          val != null &&
          val != "" &&
          val != undefined
        ) {
          for (let j = 0; j < this.provinceListAll[i].cityDtoList.length; j++) {
            if (this.provinceListAll[i].cityDtoList != null) {
              this.cityListAll.push(this.provinceListAll[i].cityDtoList[j]);
            } else {
              this.cityListAll = [];
            }
          }
        }
      }
    },
    editCity(val) {
      for (let i = 0; i < this.provinceListAll.length; i++) {
        if (
          val == this.provinceListAll[i].provinceName &&
          val != null &&
          val != "" &&
          val != undefined
        ) {
          for (let j = 0; j < this.provinceListAll[i].cityDtoList.length; j++) {
            if (this.provinceListAll[i].cityDtoList != null) {
              this.cityListAll.push(this.provinceListAll[i].cityDtoList[j]);
            } else {
              this.cityListAll = [];
            }
          }
        }
      }
    },
    //添加尾矿库
    isdialogVisible() {
      this.$refs.addListForm.validate((val) => {
        if (val) {
          const formData = new FormData();
          for (const [key, value] of Object.entries(this.addListForm)) {
            formData.append(key, value);
          }
          Axios({
            method: "post",
            url: "/group/tailingPond/addTailingPond",
            data: formData,
          }).then((res) => {
            if (res.data.resultCode == "200") {
              this.getTailingPondInforByPage();
              this.$message({
                type: "success",
                message: "新增成功",
                offset: 400,
                duration: 1000,
              });
              this.$refs.addListForm.resetFields();
            } else if (res.data.resultCode == "400") {
              this.$message({
                type: "error",
                message: "新增失败",
                offset: 400,
                duration: 1000,
              });
            }
          });
          this.dialogVisible = false;
        } else {
          this.$message({
            type: "error",
            message: "请完善表单信息",
            offset: 400,
            duration: 1000,
          });
        }
      });
    },
    // 取消
    closeDialogVisible() {
      this.$refs.addListForm.resetFields();
      this.dialogVisible = false;
    },
    //  删除尾矿库
    async delTailingList(id) {
      this.$confirm("此操作将永久删除此数据，确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        Axios({
          method: "get",
          url: "/group/tailingPond/deleteTailingPond/" + `${id}`,
        })
          .then((res) => {
            if (res.status == "200") {
              this.getTailingPondInforByPage();
              this.$message({
                type: "success",
                message: "删除成功",
                offset: 400,
                duration: 1000,
              });
            } else {
              this.$message({
                type: "error",
                message: "删除失败",
                offset: 400,
                duration: 1000,
              });
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
              offset: 400,
              duration: 1000,
            });
          });
      });
    },
    //确认修改
    async EditdialogVisible() {
      this.$refs.editListForm.validate((val) => {
        if (val) {
          const formData = new FormData();
          for (const [key, value] of Object.entries(this.editListForm)) {
            formData.append(key, value);
          }
          Axios({
            method: "post",
            url: "/group/tailingPond/updateTailingPond",
            data: formData,
          }).then((res) => {
            if (res.data.resultCode == "200") {
              this.$message({
                type: "success",
                message: "修改成功",
                offset: 400,
                duration: 1000,
              });
              this.getTailingPondInforByPage();
              this.editDialogVisible = false;
            } else {
              this.$message({
                type: "error",
                message: "修改失败",
                offset: 400,
                duration: 1000,
              });
            }
          });
        } else {
          this.$message({
            type: "error",
            message: "请完成表单",
            offset: 400,
            duration: 1000,
          });
        }
      });
    },
    eidtCloseDialogVisible() {
      this.editDialogVisible = false;
    },
    //修改弹窗弹出
    async editTailing(row) {
      this.editListForm.tailingName = row.tailingName;
      this.editListForm.tailingLevelId = row.tailingLevelId;
      this.editListForm.provinceName = row.provinceName;
      this.editListForm.tailingAreaName = row.tailingAreaName;
      this.editListForm.tailingNumber = row.tailingNumber;
      this.editListForm.tailingTypeId = row.tailingTypeId;
      this.editListForm.mineralsSpeciesId = row.mineralsSpeciesId;
      this.editListForm.industryTypeId = row.industryTypeId;
      this.editListForm.operatingStatusId = row.operatingStatusId;
      this.editListForm.ondutyTel = row.ondutyTel;
      this.editListForm.longitude = row.longitude;
      this.editListForm.latitude = row.latitude;
      this.editListForm.securityOfficer = row.securityOfficer;
      this.editListForm.securityOfficerTel = row.securityOfficerTel;
      this.editListForm.onlineMonitoringSys = row.onlineMonitoringSys;
      this.editListForm.top = row.top;
      this.editListForm.useYear = row.useYear;
      this.editListForm.useDate = row.useDate;
      this.editListForm.unitId = row.unitId;
      this.editListForm.id = row.id;
      if (row.mapUrl == null) {
        this.editListForm.mapUrl = "";
      } else {
        this.editListForm.mapUrl = row.mapUrl;
      }
      if (row.tileUrl == null) {
        this.editListForm.tileUrl = "";
      } else {
        this.editListForm.tileUrl = row.tileUrl;
      }
      // this.editListForm.tileUrl = row.tileUrl;
      this.editDialogVisible = true;
      this.editCity(this.editListForm.provinceName);
    },
    setDialogWidth() {
      var val = document.body.clientWidth;
      const def = 1980; // 默认宽度
      if (val < def) {
        this.dialogWidth = "100%";
      } else {
        this.dialogWidth = def + "px";
      }
    },
  },
  watch: {
    // watch 监听 merchant.tailingAreaName，当城市选择后，再次换省份时，能清空已选择的城市
    "addListForm.tailingAreaName": function (newValue, oldValue) {
      this.addListForm.tailingAreaCode = null;
    },
    "editListForm.tailingAreaName": function (newValue, oldValue) {
      this.editListForm.tailingAreaCode = null;
    },
  },
};
</script>

<style scoped>
.content {
  margin: 0 0.08rem;
  font-size: 0.07rem;
  height: 90vh;
}

.el-button {
  font-size: 0.07rem;
  margin-bottom: 0.04rem;
}
.bg-purple {
  background: #d3dce6;
  height: 0.15rem;
  width: 100%;
  font-size: 0.07rem;
  line-height: 0.15rem;
  padding-left: 0.02rem;
  margin-top: 0px;
}

.buttonfrom {
  margin-left: 1rem;
}
.none {
  display: none;
}
.el-table {
  display: block;
  height: 67.2vh;
  overflow: auto;
  margin-bottom: 0.075rem;
}
.el-table::before {
  z-index: inherit;
}
.avatar {
  width: 0.76rem;
  height: 0.765rem;
  border-radius: 0.025rem;
}
.delImage {
  position: absolute;
  left: 40%;
  display: none;
}
.avatar-uploader:hover .delImage {
  display: inline-block;
}
</style>
